<!--
 * @LastEditors: Yang.Zzz
 * @LastEditTime: 2024-05-17 13:55:30
-->
<script setup>
import TaskDetail from './taskDetail.vue'
import { onMounted, ref, computed ,watch, reactive , nextTick } from "vue";
import { useStore } from 'vuex';
import { useRoute, useRouter } from "vue-router";
import { deepcopy, generateRandomId    } from '../utils'; 

    const addTaskInput = ref('')
    const addInputFocus = ref(false)
    const handleAddTaskInputEvent = (eventType) => {
        addInputFocus.value = eventType === 'focus' ? true : false
    }

    const store = useStore()
    const taskList = computed(() => store.state.task.taskList);

    const route = useRoute()
    const router = useRouter();  
    const categoryName =  ref('')

    const activeTaskId = ref('')
    watch(
        ()=> route.path,
        (newPath) => {
           const taskId = route.params.taskId
           if(taskId) activeTaskId.value = taskId
        },
        {immediate: true }
    )


    const handleClickItemToDetail = (info) => {
        activeTaskId.value = info.id    
        const varietyId = route.params.varietyId
        router.push(`/webapp/tasks/${varietyId}/${info.id}`);  
    }

    const taskOption = reactive([]);
    // 使用 watch 监听 taskList 的变化  
    watch(taskList, (newVal) => {
      console.log('user list changed:', newVal); 

      const varietyId = route.params.varietyId
      if(varietyId === 'all') {
        categoryName.value = '收集箱'
        const taskOption_underway = newVal.filter((option) =>  {
            return option.status === 'underway'
        })

        const taskOption_underway_info = {
            list:taskOption_underway
        }
        const taskOption_compelete = newVal.filter((option) =>  {
            return option.status === 'compelete'
        })

        const taskOption_compelete_info = {
            title: '已完成',
            list:taskOption_compelete
        }
        
        const taskOption_copy = [taskOption_underway_info,taskOption_compelete_info]
        taskOption.splice(0, taskOption.length, ...taskOption_copy); 
      }else if(varietyId === 'today'){
        categoryName.value = '今天'
      }else if(varietyId === 'lastweek'){
        categoryName.value = '最近7天'
      }

      
      // 在这里处理 list 的变化  
    }, {  
      deep: true, // 如果 list 是一个对象或数组，并且你想监听其内部的变化，那么需要设置 deep: true  
      immediate: false, // 是否在初始化时立即调用回调函数  
    });  


    const handleAddTaskItem = async() => {
        if(addTaskInput.value === '') return;
        const taskItem = {
            title: addTaskInput.value,
            status: 'underway',
            datail: '',
            id: generateRandomId()
        }

        // 发送请求 请求成功后执行后续逻辑
        // const taskList_copy = deepcopy(taskList.value) 
        taskList.value.unshift(taskItem)
        addTaskInput.value = ''

        store.dispatch('task/setTaskList', taskList.value) 
    }

    const handleConfirmDeleteTask = async(info) => {
         // 发送请求 请求成功后执行后续逻辑
        const varietyId = route.params.varietyId
        router.push(`/webapp/tasks/${varietyId}`);  
        const taskList_copy = deepcopy(taskList.value) 
        const activeItem = taskList_copy.find(option => option.id === info.id)
        const activeItemIndex = taskList_copy.findIndex(option => option.id === info.id)
        activeItem.status = 'delete'
        store.dispatch('task/setTaskList', taskList_copy) 
    }

    const handleChangeTaskStatus = async(info,event) => {
        const result = await new Promise(resolve => {  
            setTimeout(() => {  
                resolve({
                    status: 200
                });  
            }, 300);  
        })
        if(result.status === 200) {
            const taskList_copy = deepcopy(taskList.value) 
            const activeItem = taskList_copy.find(option => option.id === info.id)
            activeItem.status = event
            store.dispatch('task/setTaskList', taskList_copy) 
        }
    }

</script>

<template>
    <div class="task-list_wrap fboxRow">
        <div class="task-list-view">
            <div class="task-list-header fboxRow">
                <div class="header-icon mr-8 fboxCenter">
                    <el-icon :size="18"><Search/></el-icon>
                </div>
                <h2 class="header-title">
                    {{  categoryName  }}
                </h2>
                <div class="header-icon_wrap fboxRow">
                    <div class="header-icon fboxCenter">
                        <el-icon :size="18"><Search/></el-icon>
                    </div>
                    <div class="header-icon fboxCenter">
                        <el-icon :size="18"><Search/></el-icon>
                    </div>
                </div>
            </div>
            <div class="task-add-wrapper">
                <div class="task-input">
                    <el-input
                    v-model="addTaskInput"
                    @focus="handleAddTaskInputEvent('focus')"
                    @blur="handleAddTaskInputEvent('blur')"
                    @keyup.enter="handleAddTaskItem"  
                    placeholder="+ 添加任务至收集箱"
                    class="input-with-select h-full"
                    :class="{'input--focus': addInputFocus} "
                    >
                    <template #append>
                        <!-- v-if="addInputFocus" -->
                        <div class="fboxRow">
                           <div class="header-icon fboxCenter">
                            <el-icon><Calendar /></el-icon>
                           </div> 
                           <div class="header-icon fboxCenter">
                            <el-icon :size="18"><ArrowDown /></el-icon>
                            </div> 
                        </div>
                    </template>
                    </el-input>
                </div>
            </div>
            
            <div class="task-list-content_wrap">
                <div class="task-list-content">
                    <div class="list-content-inner">
                        <div v-for="(item,index) in taskOption" :key="index" :class="{'is-compelete': item.title === '已完成' }" class="list-content-type_wrap">
                            <div v-if="item.title" class="content-type-typeInfo relative">
                                <div class="typeInfo-inner fboxYcenter">
                                    <el-icon :size="12"><ArrowDown /></el-icon>
                                    <h6 class="typeInfo-title"> {{ item.title  }} </h6>
                                    <span class="typeInfo-num font12 ml-8"> {{ item.list.length  }} </span>
                                </div>
                            </div>
                            <div class="content-type-listInfo">
                                <div @click="handleClickItemToDetail(childItem)" v-for="childItem in item.list" :key="childItem.id" :class="{'is-active': childItem.id === activeTaskId}" class="listInfo-item">
                                    <div class="listInfo-item-inner fboxYcenter h-full relative">
                                        <div class="listInfo-item-check h-full fboxYcenter">
                                            <el-checkbox @change="handleChangeTaskStatus(childItem,$event)" true-value="compelete" false-value="underway" :checked="childItem.status === 'compelete' ? true : false" :value="childItem.status"></el-checkbox>
                                        </div>
                                        <el-input
                                            class="h-full"
                                            v-model="childItem.title"
                                            placeholder="无标题"
                                        ></el-input>
                                        <div class="fboxYcenter h-full">
                                            <el-icon :size="12"><Document /></el-icon>
                                            <span  class="istInfo-item-date font12 ml-4">
                                                5月18日
                                            </span>
                                        </div>
                                        <el-popconfirm @confirm="handleConfirmDeleteTask(childItem)" cancel-button-text="取消" confirm-button-text="确认" title="确认要删除吗?">
                                            <template #reference>
                                                <el-icon class="moreConfig-icon"><MoreFilled /></el-icon>
                                            </template>
                                        </el-popconfirm>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <TaskDetail ></TaskDetail>
    </div>
</template>

<style scoped>
    .task-list_wrap {
        flex: 1;
    }

    .task-list-view {
        flex: 0 0 60%;
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(25, 25, 25, 0.08);
        border-left: 1px solid rgba(25, 25, 25, 0.08);
    }

    .task-list-header {
        padding: 15px 20px;
        align-items: center;
    }

    .task-list-header .header-title {
        flex: 1;
    }

    .task-list-header .header-title {
        font-size: 20px;
    }

    .task-list-content_wrap  {
        flex: 1;
        height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .task-list-content {
        flex: 1;
        overflow: auto;
        will-change: transform;
        direction: ltr;
        position:relative;
    }

    .list-content-type_wrap {
        margin-top: 24px;
    }

    .list-content-type_wrap:first-child {
        margin-top: 0px;
    }

    .list-content-type_wrap  .content-type-typeInfo {
        height: 28px;
        padding-left: 18px;

    }
    
    .content-type-typeInfo .typeInfo-num  {
        color: #191919;
    }

    .content-type-typeInfo .typeInfo-num  {
        color: #19191966;
        font-size: 12px;
    }

    .typeInfo-menuButton {
        visibility: hidden;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
    }

    .content-type-listInfo .listInfo-item {
        padding: 0 18px;
        height: 40px;
    }

    .content-type-listInfo .listInfo-item  .listInfo-item-inner  {
        position: relative;
        padding-left: 16px;
        padding-right: 12px;
    }

    .content-type-listInfo .listInfo-item:not(.is-active)  .listInfo-item-inner::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0px;
        height: 1px;
        background: rgba(25,25,25,0.05);
        left: 40px;
        width: calc(100% - 40px);
    }

    .content-type-listInfo .listInfo-item  .listInfo-item-inner {
        border-radius: 6px;
        cursor: pointer;
    }

    .content-type-listInfo .listInfo-item.is-active  .listInfo-item-inner {
        background: rgba(71, 114, 250, 0.1);
    }

    .content-type-listInfo .listInfo-item:not(.is-active)   .listInfo-item-inner:hover {
        background: rgba(25, 25, 25, 0.03);
    }

    .task-add-wrapper {
        padding: 0 20px  16px 20px;
    }

    .content-type-listInfo .istInfo-item-date {
        color: #4772Fa;
        white-space: nowrap;
    }

    .list-content-type_wrap.is-compelete .content-type-listInfo .istInfo-item-date {
        color: #19191944;
    }


    .task-list-content_wrap .content-type-listInfo  .el-input{
        border: none;
    }
   
    .task-list-content_wrap .content-type-listInfo :deep(.el-input__wrapper){
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .content-type-typeInfo .typeInfo-inner  .el-icon{
        color: #19191966;
        margin: 0 2px;
    }

    .list-content-type_wrap.is-compelete :deep(.el-input__inner) {
        color: #19191944;
    }

    .task-add-wrapper :deep(.el-input-group__append) {
        border: none;
        background: none;
        box-shadow: none;      
        padding: 0 12px;
    }

    .task-add-wrapper .header-icon {
        border-radius: 5px;
        cursor: pointer;
    }

    .task-add-wrapper .header-icon:hover  {
        background: rgba(25,25,25,0.05);
    }

    .task-add-wrapper .task-input {
        height: 40px;
        display: flex;
        align-items: center;
    }

    .task-add-wrapper .task-input :deep(.el-input__wrapper)
      {
        box-shadow: none;
        background: transparent;
    }

    .task-add-wrapper .task-input .el-input {
        border: 1px solid transparent;
        border-radius: 6px;
        background: rgba(25,25,25,0.03); 
    }

    .task-add-wrapper .task-input .el-input.input--focus {
        border: 1px solid rgba(71, 114, 250,1);
        background: #fff;
    }

    .moreConfig-icon {
        position: absolute;
        right: 2px;
        top: 4px;
        position: absolute;
        right: -15px;
        top: 12px;
        color: rgba(25,25,25,0.5);
        font-size: 12px;
        display: none;
        z-index: 1;
    }

    .moreConfig-icon::after {
        content: '';
        width: 6px;
        height: 10px;
        position: absolute;
        left: -6px;
    }

    .listInfo-item-inner:hover .moreConfig-icon {
        display: block;
    }

    

</style>
